<!-- ------------------忘记密码------------- -->
<template>
	<view class="forgetregContent">
		<view class="tips">
			资金密码请不要与登录密码或其它网站密码一致，由此产生的账号
			被盗，本站概不负责。
		</view>
		<view class="inputContent">
			<view class="inputList">
				<view class="leftText">手机号</view>
				<input
					type="number"
					v-model="phoneNumber"
					maxlength="11"
					placeholder="请输入手机号码"
					placeholder-style="color:#999"
				/>
			</view>
			<view class="inputList">
				<view class="leftText">验证码</view>

				<view :style="{ display: `flex`, flex: 1 }">
					<input
						v-model="captcha"
						placeholder="请输入验证码"
						type="number"
						maxlength="11"
						placeholder-style="color:#999"
					/>
					<view class="getCodeText" @click="getCode">
						{{ countdownText }}
					</view>
				</view>
			</view>
			<view class="inputList">
				<view class="leftText">新密码</view>
				<input
					type="password"
					v-model="password"
					placeholder="请输入新密码"
					placeholder-style="color:#999"
				/>
			</view>
			<view class="inputList">
				<view class="leftText">确认密码</view>
				<input
					type="password"
					v-model="rePassword"
					placeholder="请确认新密码"
					placeholder-style="color:#999"
				/>
			</view>
		</view>
		<view class="confirmBtn" @click="confirmUpdate">确认修改</view>
	</view>
</template>

<script>
	import { isPhoneNumber, Storage } from "@/static/utils";
	export default {
		data() {
			return {
				timer: null,
				count: 60,
				countdownText: "获取验证码",

				phoneNumber: "",
				captcha: "",
				password: "",
				rePassword: "",
			};
		},
		onLoad() {},
		methods: {
			getCode() {
				if (!isPhoneNumber(this.phoneNumber)) {
					uni.showToast({ title: "手机号码输入错误", icon: "none" });
					return;
				}

				if (this.count !== 60) return;

				uni.showToast({ title: "getting captcha...", icon: "loading" });
				this.$request
					.get("/Home/Login/xgzlmobile", {
						mobile: this.phoneNumber,
						type: "sms",
					})
					.then(() => {
						uni.hideToast();
						this.timer = setInterval(() => {
							this.countdownText = `${--this.count}s 重新获取`;
							if (this.count <= 0) {
								clearInterval(this.timer);
								this.count = 60;
								this.countdownText = `重新获取`;
							}
						}, 1000);
					});
			},
			confirmUpdate() {
				const { phoneNumber, captcha, password, rePassword } = this;

				if (![phoneNumber, captcha, password, rePassword].every(Boolean)) {
					uni.showToast({
						title: "请检查输入内容是否正确",
						icon: "none",
					});
					return;
				}

				if (password !== rePassword) {
					uni.showToast({
						title: "两次密码输入不匹配",
						icon: "none",
					});
					return;
				}

				uni.showToast({ title: "loading...", icon: "loading" });

				this.$request
					.get("/Home/Login/fougot", {
						phone: this.phoneNumber,
						code: this.captcha,
						pwd: this.password,
					})
					.then(({ data }) => {
						uni.hideToast();
						Storage.set("token", data.token);
						uni.switchTab({ url: "/pages/index/index" });
					});
			},
		},
	};
</script>

<style lang="scss">
	.forgetregContent {
		padding: 30rpx;
		box-sizing: border-box;

		.tips {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 30rpx;
		}

		.inputContent {
			width: 690rpx;
			background: #ffffff;
			border-radius: 10rpx;

			.inputList {
				border-bottom: 1rpx solid #e5e5e5;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				box-sizing: border-box;

				.leftText {
					width: 155rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #1a1a1a;
					line-height: 60rpx;
					padding-left: 20rpx;
				}

				input {
					flex: 1;
					margin-top: 8rpx;
				}

				.getCodeText {
					width: 200rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #2a62ff;
					line-height: 60rpx;
					text-align: right;
				}
			}
		}

		.confirmBtn {
			width: 100%;
			height: 80rpx;
			background: #2a62ff;
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			text-align: center;
			margin-top: 180rpx;
		}

		.bottom {
			width: 100%;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2a62ff;
			line-height: 60rpx;
			text-align: right;
			margin-top: 198rpx;

			.get {
				margin-top: 70rpx;
			}
		}
	}
</style>
